<template>

  <div class="temp_main_all">
    <div class="temp_main_left">
      <div class="nva_title">模板列表</div>
      <div class="select_list">
        <div class="temp_main_zjsy"
             @click="showTree($event,item)"
             v-for="item in catalogTemplate">
          <div class="temp_main_img_span" :class="{temp_main_zjsyactive:item.id===selectID}">
            <span class="temp_title">{{item.name}}</span>
            <span class="set_template" v-if="!item.default" @click="setDefault(item)">设为默认</span>
            <img class="set_template_img" v-else src="~@/assets/img/tree/default.png">
            <div class="new_pagenrdiv" v-show="!item.inlay && !item.default" @click="removeTemplate(item)"
                 title="删除"></div>
          </div>
        </div>
      </div>
      <div style="width: 100%;text-align:right;padding-right: 20px;padding-top: 10px">
        <el-button size="small" @click="importTemplate" plain type="primary">导&nbsp;入
        </el-button>
        <el-button size="small" @click="$emit('hideView')" plain type="primary">取&nbsp;消
        </el-button>
      </div>
    </div>
    <div class="temp_main_right">
      <div class="nva_title">预览区域</div>
      <div class="tree_box" style="height: 100%;overflow:scroll;">
        <el-tree :data="treeData" v-if="treeData.length" :props="catalogProps"
                 :render-content="renderContent"></el-tree>
      </div>
    </div>
  </div>

</template>

<script>
  import L from '../common/localStore'
  import { mapState } from 'vuex'
  import { action } from '../common/quantity'
  import evidenceCatalogTree from '../config/evidenceCatalogTree'

  export default {
    name: 'select-template',
    data () {
      return {
        catalogProps: {
          children: 'children',
          label: 'alias'
        },
        treeData: [],
        selectID: ''
      }
    },
    computed: {
      ...mapState({
        catalogTemplate: state => state.preplan.catalogTemplate,
        caseInfo: state => state.appearCourt.caseInfo
      })
    },
    async mounted () {
      // 初始化模板
      // await this.$store.dispatch(action.preplan.getCatalogTemplate);
      this.setDefaultSelect()
    },
    methods: {
      showTree (ev, item) {
        this.treeData = item.data
        this.selectID = item.id
      },
      renderContent (h, { node, data, store }) {
        return (
          <span style="flex: 1; display: flex; align-items: center; font-size: 14px; padding-right: 8px;">
            <img src='/static/img/fold.png'
              style="width:16px;height:16px;padding-right:3px"/>
            <span style="padding:3px"> {node.label}</span>
          </span>
        )
      },
      async importTemplate () {
        if (!this.treeData.length) return this.$alert('还未选中模板', '提示', { type: 'warning' })

        try {
          await this.$confirm('导入模板将会删除当前示证目录所有数据，是否继续？', '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否'
          })

          evidenceCatalogTree.importTemplate(this.treeData)

          this.$alert('导入模板成功', '提示', { type: 'success' })
          this.$emit('hideView')
          // this.$emit('importData', arr)
        } catch (e) {

        }
      },
      // 删除模板
      removeTemplate (data) {
        if (data.inlay) return this.$alert('内置模板不能删除', '提示', { type: 'warning' })
        this.setDefaultSelect()
        L.LocalStore.removeTemplate(data)
        this.$store.dispatch(action.preplan.getCatalogTemplate)
      },
      // 设置为默认模板
      setDefault (item) {
        L.LocalStore.setDefault(item)
        this.selectID = item.id
        this.$store.dispatch(action.preplan.getCatalogTemplate)
      },
      // 默认选中
      setDefaultSelect () {
        let arr = this.catalogTemplate.filter(x => x.default)
        if (arr.length) this.showTree(null, arr[0])
      }
    }
  }
</script>

<style scoped>

  .temp_main_all {
    width: 100%;
    height: 100%;
    background: white;
    font-family: 微软雅黑;
    font-size: 0;
  }

  .temp_main_left {
    width: 30%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    border-right: 1px solid #314963;
  }

  .select_list {
    height: calc(100% - 92px);
    width: 100%;
    overflow-y: auto;
    margin-top: 2px;
  }

  .temp_main_right {
    width: 70%;
    height: calc(100% - 80px);
    display: inline-block;
    vertical-align: top;
  }

  .temp_main_zjsy {
    width: 100%;
    height: 50px;
    line-height: 50px;
    float: right;
    min-width: 100px;
    text-align: left;
    cursor: pointer;
    position: relative;
  }

  .temp_main_img_span {
    padding-left: 20px;
    display: inline-block;
    width: 100%;
  }

  .temp_main_zjsy:hover {
    background: #def2fe
  }

  .temp_main_zjsyactive {
    background: rgba(64, 158, 255, 0.3);
  }

  .nva_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    display: inline-block;
    padding-left: 12px;
    font-size: 14px;
    border-bottom: 1px solid;
  }

  .temp_main_zjsy:hover .new_pagenrdiv {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 10px;
    cursor: pointer;
    width: 14px;
    height: 14px;
    background: url('~@/assets/img/del.png');
  }

  .set_template {
    display: none;
    position: absolute;
    right: 35px;
    font-size: 11px;
    cursor: pointer;
  }

  .temp_main_zjsy:hover .set_template {
    display: inline-block;
  }

  .set_template_img {
    position: absolute;
    right: 0px;
  }
</style>
